<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/pay.css">
    <script src="js/jquery-2.2.4.js"></script>
    <script src="js/index.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="header-nav">
    <nav class="nav">
        <ul>
            <li><a href="#">魅族官网</a></li>
            <li><a href="#">魅族商城</a></li>
            <li><a href="#">Flyme</a></li>
            <li><a href="#">专卖店</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">社区</a></li>
        </ul>
        <ul>
            <li><a href="#">消息</a></li>
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
        </ul>
    </nav>
</div>
<div class="vice-header">
    <div class="vice-nav">
        <div class="logo"><img src="images/logo-header.png"></div>
        <ul class="vice-list">
            <li>
                <a href="#">PRO手机</a>
                <div class="vice">
                    <div class="tab">
                        <div>
                            <a href="#">
                                <img src="images/homepanel1%20(7).png">
                                <h6>魅族PRO 6</h6>
                                <p class="baby-prize">¥2499</p>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <img src="images/PRO.png">
                                <h6>魅族PRO 5</h6>
                                <p class="baby-prize"><del>¥2499</del> ¥2199</p>
                            </a>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <a href="#">魅蓝手机</a>
                <div class="vice">
                    <div class="tab">
                        <div>
                            <a href="#">
                                <img src="images/mzboby%20(4).png">
                                <h6>魅蓝3s</h6>
                                <p class="baby-prize">¥699</p>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <img src="images/ML1.png">
                                <h6>魅蓝3</h6>
                                <p class="baby-prize">¥599</p>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <img src="images/mzboby%20(6).png">
                                <h6>魅蓝 note3</h6>
                                <p class="baby-prize">¥799</p>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <img src="images/ML2.png">
                                <h6>魅蓝 metal</h6>
                                <p class="baby-prize">¥999</p>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <img src="images/ML3.png">
                                <h6>魅蓝 note2</h6>
                                <p class="baby-prize">¥799</p>
                            </a>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <a href="#">MX手机</a>
                <div class="vice">
                    <div class="tab">
                        <div>
                            <a href="#">
                                <img src="images/MX1.png">
                                <h6>MX6</h6>
                                <p class="baby-prize">¥1999</p>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <img src="images/MX2.png">
                                <h6>MX5</h6>
                                <p class="baby-prize">¥1499</p>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <img src="images/MX2.png">
                                <h6>MX5e 经典版</h6>
                                <p class="baby-prize">¥1499</p>
                            </a>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <a href="#">精选配件</a>
                <div class="vice">
                    <div class="tab">
                        <div>
                            <a href="#">
                                <img src="images/accessories1.png">
                                <h6>魅族EP51蓝牙运动耳机</h6>
                                <p class="baby-prize">¥269</p>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <img src="images/accessories2.png">
                                <h6>魅族 HD50 头戴式耳机</h6>
                                <p class="baby-prize">¥399</p>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <img src="images/homepanel1%20(1).jpg">
                                <h6>魅族移动电源(标准版)</h6>
                                <p class="baby-prize">¥99</p>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <img src="images/accessories3.png">
                                <h6>魅族移动电源 快充版</h6>
                                <p class="baby-prize">¥149</p>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <img src="images/accessories4.png">
                                <h6>魅族 EP-21HD耳机</h6>
                                <p class="baby-prize">¥129</p>
                            </a>
                        </div>
                        <div class="special">
                            <p><a href="#" style="font-size: 13px"><img src="images/special1.png"> 耳机/音箱</a></p>
                            <p><a href="#" style="font-size: 13px"><img src="images/special2.png"> 路由器/移动电源</a></p>
                            <p><a href="#" style="font-size: 13px"><img src="images/special5.png"> 保护套/后盖/贴膜</a></p>
                            <p><a href="#" style="font-size: 13px"><img src="images/special4.png"> 数据线/电源适配器</a></p>
                            <p><a href="#" style="font-size: 13px"><img src="images/special3.png"> 周边配件</a></p>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <a href="#">智能硬件</a>
                <div class="vice">
                    <div class="tab">
                        <div>
                            <a href="#">
                                <img src="images/hardware1.jpg">
                                <h6>魅族路由器 极速版</h6>
                                <p class="baby-prize">¥199</p>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <img src="images/hardware2.png">
                                <h6>云麦好轻mini智能体脂秤</h6>
                                <p class="baby-prize">¥99</p>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <img src="images/hardware3.png">
                                <h6>新游智能游戏手柄N1pro</h6>
                                <p class="baby-prize">¥119</p>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <img src="images/mzbaby2%20(8).png">
                                <h6>罗马仕AU12快充车充</h6>
                                <p class="baby-prize">¥29</p>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <img src="images/mzb%20(3).png">
                                <h6>乐行天下V3C智能电动独轮车</h6>
                                <p class="baby-prize"><del>¥2499</del>¥1999</p>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <img src="images/hardware4.png">
                                <h6>英特曼智能红外</h6>
                                <p class="baby-prize">¥99</p>
                            </a>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<form method="post">
    <div class="pay-container">
        <div class="form-container">
            <div class="order-nav">
                <div class="order1 active">1 我的购物车</div>
                <div class="order2 active">2 填写核对订单信息</div>
                <div class="order3">3 成功提交订单</div>
            </div>
            <div class="order-title">
                <p>收货人信息</p>
            </div>
            <div class="user-address">
                <div class="address">
                    <p><span><b>+</b></span>添加新地址</p>
                </div>
                <div class="add-form">
                    <div>
                        <span>收件人</span>
                        <input type="text" name="name" maxlength="12" placeholder="长度不超过12个字">
                        <span>* 必填</span>
                    </div>
                    <div>
                        <span>手机</span>
                        <input type="text" name="tel" maxlength="11" placeholder="请输入11位手机号">
                        <span>* 必填</span>
                    </div>
                    <div>
                        <span>地址</span>
                        <select>
                            <option value="2911" selected="selected">北京</option>
                            <option value="14848">天津</option>
                            <option value="7450">吉林省</option>
                            <option value="8452">辽宁省</option>
                            <option value="16860">浙江省</option>
                            <option value="1">福建省</option>
                            <option value="16624">上海</option>
                            <option value="18482">广东省</option>
                            <option value="21612">海南省</option>
                        </select>
                        <select>
                            <option value="2912">北京市</option>
                        </select>
                        <select>
                            <option value="-1">区/县</option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                        </select>
                        <select>
                            <option value="-1">乡镇/街道</option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                            <option value=""></option>
                        </select>
                    </div>
                    <div class="detailed-address">
                        <span class="detailed">北京北京市东城区</span>
                        <input type="text" name="address" placeholder="请输入不超过50个字的详细地址，例如：路名、门牌号">
                        <i>* 请选择省份、城市、区/县、乡镇/街道</i>
                    </div>
                    <div>
                        <button>保存并使用</button>
                        <button>取消</button>
                    </div>
                </div>
            </div>
            <div class="order-others">
                <div>
                    <p>配送方式：<span class="distribution"> 快递配送 ( 免运费 )</span></p>
                </div>
                <div class="Invoice">
                    <p>
                        发票类型：
                        <input type="radio" checked="checked" value="2" name="">
                        &nbsp 电子发票
                    </p>
                    <div class="Invoice-in">
                        <p>发票抬头：默认为收货人姓名</p>
                        <p>-增值税电子普通发票的法律效力、基本用途、基本使用规定等与税务机关监制的增值税普通发票相同</p>
                        <p>-为响应国家政策，同时提高发货效率，我们的订单默认公开电子发票；电子发票打印后可用于报销。</p>
                        <p>什么是<a href="#">电子发票<i></i></a></p>
                    </div>
                </div>
                <div>
                    <span class="note">备注：</span>
                    <textarea name="Remark" cols="30" rows="10" placeholder="请输入备注..." maxlength="50"></textarea>
                </div>
            </div>
            <div class="goods">
                <p>确认订单信息</p>
                <table>
                    <thead>
                    <tr>
                        <th width="150">商品</th>
                        <th width="500" class="supplier"></th>
                        <th width="200">单价</th>
                        <th width="200">数量</th>
                        <th>小计</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="img"><img src="images/mzboby%20(4).png"></td>
                        <td><p><a href="detail.html">魅族PRO 6全网通公开版 玫瑰金 32G </a></p></td>
                        <td><b> ¥ 2499</b></td>
                        <td><b> 1</b></td>
                        <td><b> ¥ 2499</b></td>
                    </tr>
                    </tbody>
                </table>
                <!--<div>-->
                    <!--<p><a href="#">+ 使用回购劵</a></p>-->
                <!--</div>-->
            </div>
            <div class="order-total">
                <p>总金额<span>¥ 2499</span></p>
                <p>优惠金额<span class="red">- ¥ 0</span></p>
                <p>回购劵优惠<span class="red">- ¥ 0.00</span></p>
                <p>运费<span>¥ 0</span></p>
                <div style="border-bottom: 1px solid #e3e4e4;width: 330px"></div>
                <p style="margin-top: 20px">应付:<span class="money"><b>¥ 2499</b></span></p>
                <button>提交订单</button>
            </div>
        </div>
    </div>
</form>
<div class="footer">
    <div class="mzcontainer">
        <div>
            <ul>
                <li>
                    <img src="images/footer%20(3).png">
                    <P><b>7天</b> 无理由退货</P>
                </li>
                <li><span></span></li>
                <li>
                    <img src="images/footer%20(4).png">
                    <p><b>15天</b> 换货保障</p>
                </li>
                <li><span></span></li>
                <li>
                    <img src="images/footer%20(2).png">
                    <P><b>1年</b> 免费保修</P>
                </li>
                <li><span></span></li>
                <li>
                    <img src="images/footer%20(1).png">
                    <p><b>百城</b> 速达</p>
                </li>
                <li><span></span></li>
                <li>
                    <img src="images/footer%20(5).png">
                    <p><b>全场</b> 包邮</p>
                </li>
                <li><span></span></li>
                <li>
                    <img src="images/footer%20(6).png">
                    <p><b>2000多家</b> 专卖店</p>
                </li>
            </ul>
        </div>
        <div class="footer-nav">
            <section>
                <h5>帮助说明</h5>
                <p><a href="#">支付方式</a></p>
                <p><a href="#">配送说明</a></p>
                <p><a href="#">售后服务</a></p>
                <p><a href="#">付款帮助</a></p>
            </section>
            <section>
                <h5>Flyme</h5>
                <p><a href="#">开放平台</a></p>
                <p><a href="#">固件下载</a></p>
                <p><a href="#">软件商店</a></p>
                <p><a href="#">查找手机</a></p>
            </section>
            <section>
                <h5>关于我们</h5>
                <p><a href="#">关于魅族</a></p>
                <p><a href="#">加入我们</a></p>
                <p><a href="#">联系我们</a></p>
                <p><a href="#">法律声明</a></p>
            </section>
            <section>
                <h5>关注我们</h5>
                <p><a href="#">新浪微博</a></p>
                <p><a href="#">腾讯微博</a></p>
                <p><a href="#">QQ空间</a></p>
                <p><a href="#">官方微信</a></p>
            </section>
            <section>
                <h5>24小时全国服务热线</h5>
                <h3><a href="#">400-788-3333</a></h3>
                <button>24小时在线客服</button>
            </section>
        </div>
        <div class="footer-page">
            <p>©2016 Meizu Telecom Equipment Co., Ltd. All rights reserved.
                <a href="#">备案号：粤ICP备13003602号-2</a>
                <a href="#">经营许可证编号：粤B2-20130198 营业执照</a>
                <img src="images/footer-copy-1.png"><img src="images/footer-copy-2.png"><img src="images/trust-icon.png">
            </p>
        </div>
    </div>
</div>
</body>
</html>